<template>
  <div class="interpretation-display">
    <h3 class="interpretation-title">卦象深度解读</h3>
    
    <div v-if="formattedInterpretation.length > 0" class="interpretation-content">
      <div 
        v-for="(section, index) in formattedInterpretation" 
        :key="index" 
        class="interpretation-section"
      >
        <h4 v-if="section.title" class="section-title">{{ section.title }}</h4>
        <div class="section-content">
          <p 
            v-for="(paragraph, pIndex) in section.paragraphs" 
            :key="pIndex" 
            class="interpretation-paragraph"
          >
            {{ paragraph }}
          </p>
        </div>
      </div>
    </div>
    
    <div v-else class="raw-interpretation">
      <p>{{ interpretation }}</p>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  interpretation: {
    type: String,
    required: true
  }
})

const formattedInterpretation = computed(() => {
  const text = props.interpretation
  if (!text) return []

  // 尝试解析AI返回的结构化文本
  const sections = []
  const lines = text.split('\n').filter(line => line.trim())
  
  let currentSection = { title: '', paragraphs: [] }
  
  for (const line of lines) {
    const trimmedLine = line.trim()
    
    // 检测标题行（包含冒号或数字序号）
    if (trimmedLine.match(/^[一二三四五六七八九十]、|^[0-9]+\.|^【.*】|^.*：$/)) {
      if (currentSection.paragraphs.length > 0 || currentSection.title) {
        sections.push({ ...currentSection })
      }
      currentSection = { title: trimmedLine.replace(/：$/, ''), paragraphs: [] }
    } 
    // 检测段落内容
    else if (trimmedLine) {
      currentSection.paragraphs.push(trimmedLine)
    }
  }
  
  // 添加最后一个section
  if (currentSection.paragraphs.length > 0 || currentSection.title) {
    sections.push(currentSection)
  }
  
  // 如果没有解析出结构，返回原始文本作为单个段落
  if (sections.length === 0) {
    return [{
      title: '卦象解读',
      paragraphs: [text]
    }]
  }
  
  return sections
})
</script>

<style scoped>
.interpretation-display {
  background: linear-gradient(135deg, #2C3E50 0%, #34495E 100%);
  padding: 24px;
  border-radius: 12px;
  border: 2px solid #D4AF37;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  color: #ECF0F1;
}

.interpretation-title {
  font-size: 22px;
  font-weight: bold;
  color: #D4AF37;
  margin-bottom: 20px;
  text-align: center;
  font-family: 'SimSun', serif;
  border-bottom: 2px solid #D4AF37;
  padding-bottom: 12px;
}

.interpretation-section {
  margin-bottom: 24px;
  background: rgba(255, 255, 255, 0.05);
  padding: 20px;
  border-radius: 8px;
  border-left: 4px solid #D4AF37;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  color: #D4AF37;
  margin-bottom: 12px;
  font-family: 'SimSun', serif;
}

.interpretation-paragraph {
  line-height: 1.8;
  margin-bottom: 12px;
  text-align: justify;
  font-size: 15px;
  color: #ECF0F1;
}

.interpretation-paragraph:last-child {
  margin-bottom: 0;
}

.raw-interpretation p {
  line-height: 1.8;
  text-align: justify;
  font-size: 15px;
  color: #ECF0F1;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .interpretation-display {
    padding: 16px;
  }
  
  .interpretation-title {
    font-size: 20px;
  }
  
  .section-title {
    font-size: 16px;
  }
  
  .interpretation-paragraph {
    font-size: 14px;
  }
}
</style>